<template>
	<view class="addAddress">
		<view class="addAddress-form">
			<view class="addAddress-form__input borBot">
				<view class="label">姓名</view>
				<input class="inps" type="text" placeholder="请输入姓名" v-model="params.name">
			</view>
			<view class="addAddress-form__input borBot">
				<view class="label">联系电话</view>
				<input class="inps" type="text" placeholder="请输入联系电话" v-model="params.phone">
			</view>
			<view class="addAddress-form__input borBot">
				<view class="label">地址选择</view>
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="addAddress-form__picker">{{array[index]}}</view>
				</picker>
				<image class="icon" mode="widthFix" :src="$imgUrl('/address/icon-right.png')"></image>
			</view>
			<view class="addAddress-form__input">
				<view class="label">详细地址</view>
				<input class="inps" type="text" placeholder="请输入详细地址" v-model="params.address">
			</view>
		</view>
		
		<view class="addAddress-form">
			<view class="addAddress-form__def">
				<view class="label">设为默认地址</view>
				<image class="select-icon" v-if="params.def == 1" mode="widthFix" :src="$imgUrl('/address/icon-select.png')" @click="selectDef"></image>
				<image class="select-icon" v-else mode="widthFix" :src="$imgUrl('/address/icon-noselect.png')" @click="selectDef"></image>
			</view>
		</view>
		
		<view class="addAddress-btn" @click="toSave">立即保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					name: '',
					phone: '',
					address: '',
					def: 0,
					area: ''
				},
				array: ['梁园区', '睢阳区'],
				index: 0
			}
		},
		onLoad(options) {
			console.info(options)
			this.params = JSON.parse(options.params)
			this.index = this.array.findIndex(i => i === this.params.area)
		},
		methods: {
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.params.area = this.array[this.index]
			},
			selectDef () {
				this.params.def = this.params.def === 1 ? 2 : 1
			},
			toSave () {
				if (this.params.name === '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 2000,
						mask: true
					});
					return
				}
				if (this.params.phone === '') {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none',
						duration: 2000,
						mask: true
					});
					return
				}
				if (this.params.address === '') {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none',
						duration: 2000,
						mask: true
					});
					return
				}

				uni.showLoading({
					title: '上传中'
				})
				this.$apis.address.editAddress(this.params)
					.then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '操作成功',
								icon: 'none',
								duration: 2000,
								mask: true
							});
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000,
								mask: true
							});
						}
					})
			}
		}
	}
</script>

<style scoped lang="scss">
.addAddress{
	width: 100vw;
	min-height: 100vh;
	background: #F6F6F6;
	padding-top: 20rpx;
	
	 .addAddress-form{
	 	padding: 0 24rpx;
	 	margin-bottom: 20rpx;
	 	background-color: #ffffff;
	 }
	 
	 .addAddress-form__def{
		height: 108rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.label{
		 	width: 200rpx;
		 	margin-right: 32rpx;
		 	font-size: 30rpx;
		 	color: #666666;
		}
		.select-icon{
		 	width: 108rpx;
		 	height: 54rpx;
		}
	 }
	 
	 .addAddress-form__input{
	 	height: 108rpx;
	 	display: flex;
	 	align-items: center;
		position: relative;
	 
	 	.label{
	 		width: 155rpx;
	 		margin-right: 32rpx;
	 		font-size: 30rpx;
	 		color: #666666;
	 	}
	 	
	 	.inps{
	 		width: 450rpx;
	 		font-size: 30rpx;
	 		color: #333333;
	 	}
		
		.icon{
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: 24rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	 }
	 
	 .borBot{
	 	border-bottom: 2rpx solid #F6F6F6;
	 }
	 
	 .addAddress-form__picker{
		width: 490rpx;
	 }
	 
	.addAddress-btn{
		width: 710rpx;
		height: 80rpx;
		background: #2FCC71;
		border-radius: 40rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
}
</style>
